<template>
    <view class="flex-col homepage">
        <u-icon class="icon-checkbox-mark" name="checkbox-mark"></u-icon>
        <view class="u-line-1 text">缴费成功</view>
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-two">费用类型</view>
                <view class="u-line-1 text-three">{{msg.source}}费</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-four">就诊科室</view>
                <view class="u-line-1 text-five">{{msg.divisionName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-six">医生姓名</view>
                <view class="u-line-1 text-seven">{{msg.doctorName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-eight">就诊人</view>
                <view class="u-line-1 text-nine">{{msg.name}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text-ten">身份证号</view>
                <view class="u-line-1 text-eleven">{{msg.number}}</view>
            </view>
            <view class="u-line-1 text-twelve"></view>
            <u-line class="line-two"></u-line>
        </view>
        <view class="flex-col wrapper-two">
            <view class="u-line-1 text-thirteen">费用明细</view>
			<text  v-for="drug in drug" :key="drug.id">
			   <u-line class="line-three" margin="0rpx 0rpx 20rpx 0rpx"></u-line>
				<view class="flex-row wraper-row-three">
					<view class="u-line-1 text-fourteen" v-if="!!drug.drugs">{{drug.drugs.drugsName}}</view>
					<view class="u-line-1 text-fifteen">￥{{drug.price}}</view>
				</view>
				<view class="flex-row wraper-row-four">
					<view class="u-line-1 text-sixteen" v-if="!!drug.drugs">单价：￥{{drug.drugs.drugsPrice}}</view>
					<view class="u-line-1 text-seventeen">数量：{{drug.useNumber}}</view>
				</view>
			</text>
        </view>
        <view class="flex-col wrapper-three">
            <view class="flex-row wraper-row-seven">
                <view class="u-line-1 text-21">余额</view>
                <view class="u-line-1 text-22">支付方式</view>
            </view>
            <u-line class="line-five" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-eight">
                <view class="u-line-1 text-23" v-if="!!drugMes.patientCard">{{drugMes.patientCard.balance}}元</view>
                <view class="u-line-1 text-24">卡内余额</view>
            </view>
            <u-line class="line-six" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-nine">
                <view class="u-line-1 text-25">{{rental}}元</view>
                <view class="u-line-1 text-26">订单总额</view>
            </view>
            <u-line class="line-seven" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-ten">
                <view class="u-line-1 text-27">{{drugMes.serialNumber}}</view>
                <view class="u-line-1 text-28">订单编号</view>
            </view>
            <u-line class="line-eight" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-eleven">
                <view class="u-line-1 text-29">{{drugMes.createTime}}</view>
                <view class="u-line-1 text-30">订单时间</view>
            </view>
            <u-line class="line-nine" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-twelve">
                <view class="u-line-1 text-31">已支付</view>
                <view class="u-line-1 text-32">订单状态</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				drugMes:'',
				drug:[],
				rental:'',
				msg:''
			}
        },
        methods: {

        },
		onLoad(res) {
			this.msg = JSON.parse(res.msg)
			console.log(this.msg)
			//查询缴费详情
			uni.request({
				url:this.URL+"record/record/drug-record/drugMesById/"+this.msg.id,
				method:"GET",
				success :(res) => {
					console.log(res)
					if(res.data.code == 20000){
						this.drugMes = res.data.data.drugMes
						this.drug = res.data.data.recordVos
						this.rental += res.data.data.rental
					}
					console.log("this.drugMes" , this.drugMes)
					console.log("this.drug" , this.drug)
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 40rpx 37rpx 0rpx 37rpx;

        .icon-checkbox-mark {
            display: block;
            margin-right: auto;
            margin-bottom: 20rpx;
            margin-left: auto;
        }

        .text {
            width: 142rpx;
            margin-right: auto;
            margin-bottom: 20rpx;
            margin-left: auto;
            font-size: 32rpx;
        }

        .wrapper {
            width: 100%;
            margin-bottom: 26rpx;
            padding: 30rpx 0rpx 28rpx 20rpx;
            background: #ffffff;

            .wraper-row {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: 28rpx;

                .text-two {
                    width: 150rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-three {
                    width: 504rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 634rpx;
            }

            .wraper-row {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: 28rpx;

                .text-four {
                    width: 150rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-five {
                    width: 504rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: 28rpx;

                .text-six {
                    width: 150rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-seven {
                    width: 504rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row {
                width: 654rpx;
                justify-content: space-between;
                margin-bottom: 28rpx;

                .text-eight {
                    width: 150rpx;
                    letter-spacing: 16rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-nine {
                    width: 504rpx;
                    font-size: 32rpx;
                }
            }

            .wraper-row-two {
                width: 654rpx;
                justify-content: space-between;

                .text-ten {
                    width: 150rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-eleven {
                    width: 504rpx;
                    font-size: 32rpx;
                }
            }

            .text-twelve {
                top: 186rpx;
                left: -36rpx;
                position: absolute;
            }

            .line-two {
                width: 634rpx;
                bottom: -2rpx;
                left: 20rpx;
                position: absolute;
            }
        }

        .wrapper-two {
            width: 100%;
            margin-bottom: 20rpx;
            padding: 20rpx 0rpx 26rpx 18rpx;
            font-size: 32rpx;
            background: #ffffff;

            .text-thirteen {
                width: 152rpx;
                margin: 0rpx 0rpx 20rpx 2rpx;
                color: #aaaaaa;
            }

            .line-three {
                width: 640rpx;
            }

            .wraper-row-three {
                width: 658rpx;
                justify-content: space-between;
                margin-bottom: -4rpx;

                .text-fourteen {
                    width: 196rpx;
                }

                .text-fifteen {
                    width: 188rpx;
                    height: 38rpx;
                    margin-top: 30rpx;
                }
            }

            .wraper-row-four {
                width: 348rpx;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .text-sixteen {
                    width: 174rpx;
                    height: 38rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }

                .text-seventeen {
                    width: 174rpx;
                    height: 38rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }
            }

            .line-four {
                width: 640rpx;
            }

            .wraper-row-five {
                width: 658rpx;
                justify-content: space-between;
                margin-bottom: -4rpx;

                .text-eighteen {
                    width: 196rpx;
                }

                .text-nineteen {
                    width: 188rpx;
                    height: 38rpx;
                    margin-top: 30rpx;
                }
            }

            .wraper-row-six {
                width: 348rpx;
                justify-content: space-between;

                .text-twenty {
                    width: 174rpx;
                    height: 38rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }

                .text-20 {
                    width: 174rpx;
                    height: 38rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }
            }
        }

        .wrapper-three {
            width: 100%;
            padding: 30rpx 0rpx 42rpx 18rpx;
            font-size: 32rpx;
            background: #ffffff;

            .wraper-row-seven {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 160rpx;

                .text-21 {
                    width: 100%;
                }

                .text-22 {
                    width: 166rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-five {
                width: 640rpx;
            }

            .wraper-row-eight {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 160rpx;

                .text-23 {
                    width: 100%;
                }

                .text-24 {
                    width: 166rpx;
                    height: 42rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-six {
                width: 640rpx;
            }

            .wraper-row-nine {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 160rpx;

                .text-25 {
                    width: 100%;
                    color: #db0f0f;
                }

                .text-26 {
                    width: 166rpx;
                    height: 42rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-seven {
                width: 640rpx;
            }

            .wraper-row-ten {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 160rpx;

                .text-27 {
                    width: 100%;
                }

                .text-28 {
                    width: 166rpx;
                    height: 42rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-eight {
                width: 640rpx;
            }

            .wraper-row-eleven {
                width: 498rpx;
                margin: 0rpx 0rpx 30rpx 160rpx;

                .text-29 {
                    width: 100%;
                }

                .text-30 {
                    width: 166rpx;
                    height: 42rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-nine {
                width: 640rpx;
            }

            .wraper-row-twelve {
                width: 498rpx;
                margin-left: 160rpx;

                .text-31 {
                    width: 100%;
                }

                .text-32 {
                    width: 166rpx;
                    height: 42rpx;
                    top: 0rpx;
                    left: -160rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }
        }
    }
</style>